<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/login.css"/>
    <link type="text/css" rel="stylesheet" href="css/message.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/message.min.js"></script>
    <script type="text/javascript">
        //用于存储短信验证码
        var smscode=null;
        var uid = null;

        //用于倒计时计时
        var timeo = 60;

        //向后端提交查询用户名请求
        function queryUserName(phone) {
            $.ajax({
                url:"user/queryusername",
                type:"POST",
                data:{uphone:phone},
                dataType: "json",
                success:function (user) {
                    var span2 = $(".span2");
                    uid = user.uid;
                    $("#p_username").empty();
                    $("#p_username").append(user.uname);
                    span2.empty();
                    span2[0].innerText=user.uname;
                }
            })
        }

        //验证新密码和旧密码是否一致
        function checkPassword() {
            var newpwd = $("[name='new_pwd']").val();
            var checkpwd = $("[name='check_pwd']").val();

            if(newpwd==checkpwd){
                return true;
            }
            return false;
        }
        //提交修改密码请求
        function updatePassword(){
            var checkpwd = $("[name='check_pwd']").val();
            if(checkPassword()){
                $.ajax({
                    url:"user/updatePassword",
                    type:"POST",
                    data:{upassword:checkpwd,uid:this.uid},
                    success:function (status) {
                        if(status=="true"){
                            $.message({
                                message:"修改成功",
                                time:1500,
                                type:"success"
                            })
                        }else {
                            $.message({
                                message:"修改失败",
                                time:1500,
                                type:"error"
                            })
                        }
                    }
                })
            }
        }

        //输入框改变触发事件
        $(document).on("change",".checked_pwd",function () {
            if(inRule($(this).val())){
                $(this)[0].style="";
                $(this).parent().children("h6").remove();
                if(!checkPassword()){
                    $(".checked_pwd").parent().children("h6").remove();
                    $(".checked_pwd")[1].style="border:1px solid red;";
                    $("[name='check_pwd']").after("<h6 style='color: red;font-weight: normal;width: 325px;height: 10px;text-align: right'>两次密码不一致</h6>");
                    $(".checked_pwd").removeClass("true");
                    return;
                }
                $("h6").remove();
                $(".checked_pwd")[0].style="";
                $(".checked_pwd")[1].style="";
                $(".checked_pwd").addClass("true");
            }else {
                $(this).parent().children("h6").remove();
                $(this)[0].style="border:1px solid red;";
                $(this).after("<h6 style='color: red;font-weight: normal;width: 325px;height: 10px;text-align: right'>密码必须是6-20个字符</h6>");
                $(".checked_pwd").removeClass("true");
            }
        })

        //

        //判断密码是否符合规则
        function inRule(pwd) {
            var reg = /^\s*$/g;
            var reg1 = /^[a-zA-Z0-9\~\!\@\#\$\%\^\&\*\_\+\{\}\:\"\|\<\>\?\-\=\;\'\\\,\.\/]{6,20}$/;
            return reg1.test(pwd)&&!reg.test(pwd);
            // if(reg.test(pwd))
            //     return true;
        }


        //获取验证码倒计时按钮
        function countdown(){

            var that = $("#getSmsCode")

            var timeStop = setInterval(function(){
                timeo--;

                if (timeo>0) {

                    that.text('重新发送(' + timeo +'s)');

                    // that.attr('disabled','disabled');//禁止点击

                    that[0].onclick=null;

                    that[0].style="background-color: #9F9F9F;text-align:center;";

                    that[0].stopPropagation=false;

                }else{

                    timeo = 60;//当减到0时赋值为60

                    that.text('获取验证码');

                    clearInterval(timeStop);//清除定时器

                    that[0].onclick=sendSmsCode;

                    // that.removeAttr('disabled');//移除属性，可点击

                    that[0].style="text-align:center;";

                }

            },1000)

        }

        //验证手机验证码
        function checkSmsCode() {
            var smscode = $("[name='smscode']").val();
            if (smscode==this.smscode){
                return true;
            }else {
                return false;
            }
        }

        //发送手机短信验证码
        function sendSmsCode () {

            countdown();

            var uphone=$("[name='account']").val();
            $.ajax({
                url:"smscode/createsmscode",
                data:{phone:uphone},
                type:"POST",
                dataType:"json",
                async:false,
                success:function (code) {
                    smscode=code;
                }
            })
            if (smscode!=false && smscode!=null){
                $.message({
                    message:"发送成功",
                    time:1500,
                    type:"success"
                })
            }else {
                $.message({
                    message:"发送失败请重新发送",
                    time:1500,
                    type:"warning"
                })
            }
        }

        //验证图片验证码是否正确
        function checkCode () {

            var code = $("[name='verification-code']").val();
            var account = $("[name='account']").val();
            var checked = checkAccount(account);
            var boolean = null;

            $.ajax({
                url:"checkCaptcha",
                data:"code="+code,
                async:false,
                type:"GET",
                success:function (status) {
                    if(status=="true"){
                        if(checked!=false){
                            if(loginCheck(checked)){
                                boolean = true;
                            }
                        }
                    }else {
                        $.message({
                            message:"验证码输入错误",
                            time:1000,
                            type:"warning"
                        })
                        setTimeout(function (){
                            $("#v_container").attr("src","getCaptchaImg?a="+Math.random());
                        },1000);
                        boolean = false;
                    }
                }
            });
            return boolean;
        }

        //刷新图片验证码
        function loadCode() {
            $("#v_container").attr("src","getCaptchaImg?a="+Math.random());
        }

        //正则验证用户名
        function checkUser(str){
            var re = /^[a-zA-z]\w{3,15}$/;
            if(re.test(str)){
                return "username";
            }else{
                return false;
            }
        }

        //正则验证手机号
        function checkMobile(str) {
            var re = /^1\d{10}$/
            if (re.test(str)){
                return "phone";
            }else{
                return false;
            }
        }

        //正则验证邮箱
        function checkEmail(str){
            var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
            if(re.test(str)){
                return "email";
            }else{
                return false;
            }
        }

        //验证输入的账号格式
        function checkAccount(str) {
            if(checkUser(str)=="username"){
                return "uname="+str;
            }else if(checkMobile(str)=="phone"){
                return "uphone="+str;
            }else if(checkEmail(str)=="email"){
                return "uemail="+str;
            }else {
                $.message({
                    message:"请输入正确的账号",
                    time:1500,
                    type:"warning"
                })
                setTimeout(function (){
                    $("#v_container").attr("src","getCaptchaImg?a="+Math.random());
                },1000);
                return false;
            }
        }

        //后台验证用户
        function loginCheck(username) {
            var boolean = null;
            $.ajax({
                url:"user/login",
                type:"POST",
                data:username,
                async:false,
                success:function (bol) {
                    if(bol=="true"){
                        boolean = true;
                    }else {
                        $.message({
                            message:"该账号不存在",
                            time:"2000",
                            type:"error"
                        })
                        setTimeout(function (){
                            $("#v_container").attr("src","getCaptchaImg?a="+Math.random());
                        },1000);
                        boolean = false;
                    }
                }
            })
            return  boolean
        }
    </script>
    <title>忘记密码-确认账户</title>
</head>
<body>
<div class="header">
    <div class="mainwarp">
        <div class="logo"><a href="index.jsp"><img src="images/log.png"/></a></div>
        <div class="welcome">重置密码</div>
        <div class="headerright">
            <a href="login.jsp">个人登录 </a>
            <span>|</span>
            <a href="index.jsp">返回首页</a>
        </div>
    </div>
</div>
<div class="passdBox">
    <div class="passpart1">
        <div class="TitleNotice">忘记密码了？根据收到的激活码进行验证身份，通过验证后重置密码，您就可以登录了。</div>
        <div class="StepsBox">
            <div id="step_div_1" class="Step Active stepfirst">
                <span class="StepNo">1</span>
                <span class="StepName">确认账户</span>
            </div>
            <div id="step_div_2" class="Step">
                <span class="StepNo">2</span>
                <span class="StepName">安全认证</span>
            </div>
            <div id="step_div_3" class="Step">
                <span class="StepNo">3</span>
                <span class="StepName">重置密码</span>
            </div>
            <div id="step_div_4" class="Step steplast">
                <span class="StepNo"></span>
                <span class="StepName">完成</span>
            </div>
        </div>
        <div class="clear"></div>
        <div id="step_1" class="restInfo">
            <div class="box1">
                <span>账   户：</span>
                <input name="account" type="text" placeholder="用户名/邮箱/已验证手机号"/>
                <div class="clear"></div>
            </div>
            <div class="box1" name="box1">
                <span>验证码：</span>
                <input name="verification-code" type="text" class="yzm"/>
                <img id="v_container" src="getCaptchaImg" width="100" height="35" onclick="return loadCode();"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input name="next-step1" type="button" step_index="1" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_2" class="restInfo" hidden>
            <div class="box2" id="info">激活码已经发送到您的手机：152*******56 中</div>
            <div class="box1">
                <span>激活码：</span>
                <input name="smscode" type="text" class="yzm"/>
                <b class="phonenum" id="getSmsCode" onclick="sendSmsCode();" style="text-align: center;">获取短信验证码</b>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input name="" type="button" step_index="2" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_3" class="restInfo" hidden>
            <div class="box2">
                <span class="span1">用户名：</span>
                <span class="span2">EB5_14@your_email.com</span>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <span>新密码：</span>
                <input class="checked_pwd" name="new_pwd" type="text"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <span>确认密码：</span>
                <input class="checked_pwd" name="check_pwd" type="text"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input name="" type="button" step_index="3" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_4" class="restInfo2" hidden>
            <div class="SucTitle">恭喜您，您的密码设置成功！</div>
            <p id = "p_username">您的用户名是：HEB5_14@your_email.com</p>
            <p>您可以使用新密码登录蝶飞人才网<a href="login.jsp">立即登录</a></p>
        </div>

    </div>
</div>
<div class="clear"></div>
</body>
<script>

    $(function () {
        $(".onebtn").on("click", function () {
            if($(this).attr("step_index")==1){
                if(!checkCode()){
                    return false;
                }
                $("#info").empty();
                $("#info")[0].innerText="激活码已经发送到您的手机："+$("[name='account']").val()+" 中"
            }
            if ($(this).attr("step_index")==2){
                if(!checkSmsCode()){
                    $.message({
                        message:"验证码错误",
                        time:1500,
                        type:"error"
                    })
                    return false;
                }
                queryUserName($("[name='account']").val());
            }
            if ($(this).attr("step_index")==3){
                if(!($(".checked_pwd")[0].classList[1]=="true"))
                    return false;
                updatePassword();

            }

            let stepIndex = $(this).attr("step_index");
            let stepId = '#step_' + stepIndex;
            stepIndex++;
            let divNextId = '#step_div_' + stepIndex;
            let stepNextId = '#step_' + stepIndex;
            $(stepId).hide();
            $(stepNextId).show();
            $(divNextId).addClass("Active");

        });
    });

</script>
</html>